<template>
  <div class="yhcl w-100 h-100">
    <div style="width: 180px">
      <div
        class="item"
        v-for="item in baseList"
        :key="item.name"
        :style="{
          background: `url(${item.bg}) no-repeat center center`,
          backgroundSize: '100% auto',
        }"
      >
        <div class="value">
          <span>{{ item.value }}</span
          >个
        </div>

        <div class="name">{{ item.name }}</div>
      </div>
    </div>

    <div style="flex: 1; display: flex; flex-flow: row wrap">
      <div class="contain_item" v-for="(item, index) in list">
        <div
          style="width: 70px; height: 100%; margin-top: 10px; margin-left: 10px"
        >
          <img :src="item.img" alt="" style="width: auto; height: 70px" />
        </div>
        <div class="comment ms-2 d-flex justify-content-around">
          <div>
            {{ item.label }}
          </div>
          <div
            style="
              color: #daf5fa;
              font-family: YouSheBiaoTiHei;
              font-size: 34px;
              text-shadow: 0px 0px 3px #5ce1ff;
              font-weight: bold;
            "
          >
            {{ item.value }}
          </div>
          <div>个</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import bg1 from "@/assets/image/underGround/sbjkzs.png";
import bg2 from "@/assets/image/underGround/sbjksl_1.png";
import bg3 from "@/assets/image/underGround/sbjksl_2.png";
import bg4 from "@/assets/image/underGround/sbjksl_3.png";
import bg5 from "@/assets/image/underGround/sbjksl_4.png";
const baseList = reactive([{ name: "设备监控总数", bg: bg1, value: 0 }]);

const itemList = [
  { label: "视频安防设施", img: bg2 },
  { label: "通风设施", img: bg3 },
  { label: "能耗监控设施", img: bg4 },
  { label: "排湿设施", img: bg5 },
];

const list: any = ref([]);

const jsonData: any = inject("jsonData");
const current = computed(() => {
  let data = [];
  try {
    data = jsonData.value.underJsc.sbjksl;
  } catch (error) {}

  return data;
});
watch(
  () => current.value,
  (val) => {
    if (val) {
      baseList[0].value = val.reduce((pre: number, cur: number) => pre + cur);
      list.value = val.map((value: any, index: number) => ({
        value,
        ...itemList[index],
      }));
    }
  }
);
</script>

<style lang="less" scoped>
.yhcl {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  .item {
    height: 100%;
    flex: 1;
    margin: 0 28px;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
  }
  .value {
    margin: 0px 0 180px;
    span {
      font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
      font-weight: bold;
      text-shadow: 0px 0px 3px #5ce1ff;
      font-size: 34px;
      letter-spacing: 4px;
    }
  }
}
.contain {
  display: flex;
  flex-wrap: wrap;
  &_item {
    width: 45%;
    height: 90px;
    display: flex;
    box-shadow: inset 0px 0px 4px 1px #5adbf9;
    margin: 30px 0 0 30px;
  }

  .comment {
    font-size: 20px;
    line-height: 90px;
    font-family: "OPPOSans-Regular";
    color: #c6d1db;
    width: 100%;
  }
}
</style>
